<template>
  <el-row :gutter="20" class="realDataWrapper">
    <el-col :span="24">
      <el-card shadow="always" body-style="padding:10px 10px;">
        <!-- 产线模式 -->
        <el-descriptions direction="horizontal" :column="4" border>
          <template #title>
            {{ $t('wms.productionLineModel') }}
            <el-tag class="m-ml-10" type="warning" effect="plain"> {{ queryParams.productionLineCode || '-' }}</el-tag>
          </template>
          <el-descriptions-item align="center" label-class-name="des-width" className="font-size20 des-width"
                                :label="$t('wms.currentCode')" labelStyle="width: 100px" contentStyle="width: 100px">
            {{ data.input_material_code || ' -   -    -    -   -' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label-class-name="des-width" className="font-size20 des-width"
                                :label="$t('mes.refuelingCondition')" labelStyle="width: 100px" contentStyle="width: 100px">
            {{ data.changeMaterialMode || ' -   -    -    -   -' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label-class-name="des-width" className="font-size20 des-width"
                                :label="$t('mes.refuelingNumber')" labelStyle="width: 100px" contentStyle="width: 100px">
            {{ data.changeMaterialCode || ' -   -    -    -   -' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" label-class-name="des-width" className="font-size20 des-width"
                                :label="$t('wms.productionLineModel')" labelStyle="width: 100px" contentStyle="width: 100px">
            {{ data.productionLinePattern  || ' 正 常 生 产' }}
          </el-descriptions-item>
<!--          <el-descriptions-item align="center" label-class-name="des-width" className="font-size20 des-width"-->
<!--                                :label="$t('wms.materialSpce')" labelStyle="width: 120px" contentStyle="width: 300px">-->
<!--            {{ data.specification || '-' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item align="center" label-class-name="des-width" className="font-size20 des-width"-->
<!--                                :label="$t('mes.currentMode')" labelStyle="width: 120px" contentStyle="width: 120px">-->
<!--            {{ data.production_line_pattern || '-' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item align="center" label-class-name="des-width" className="font-size20 des-width"-->
<!--                                :label="$t('mes.modeStartTime')" labelStyle="width: 120px" contentStyle="width: 250px">-->
<!--            {{ data.pattern_start_time || '-' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item align="center" label-class-name="des-width" className="font-size20 des-width"-->
<!--                                :label="$t('mes.modeEndTime')" labelStyle="width: 120px" contentStyle="width: 250px">-->
<!--            {{ data.pattern_end_time || '-' }}-->
<!--          </el-descriptions-item>-->
        </el-descriptions>
      </el-card>
    </el-col>
    <el-col :span="24" style="margin-top: 5px">
      <el-card shadow="always" body-style="padding:5px 10px;">
        <!-- 实时数据-->
        <el-descriptions direction="vertical" :column="14" border>
          <template #title>
            {{ $t('mes.realTimeData') }}
            <el-tag class="m-ml-10" type="warning" effect="plain"> {{ queryParams.productionLineCode || '-' }}</el-tag>
          </template>
          <el-descriptions-item align="center" width="100px" className="font-size20" :label="$t('mes.trayNumber')">
            {{ data.barcode || '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" width="90px" className="font-size20" :label="$t('mes.qtyNum')">
            <el-tag size="small">{{ data.totalQty || '0' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('wms.materialCode')">{{
              data.materialCode || '-'
            }}
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('wms.materialName')">
            {{ data.materialName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('wms.materialSpce')">
            {{ data.materialSpec || '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('wms.unit')">{{
              data.unit || '-'
            }}
          </el-descriptions-item>
          <!--          <el-descriptions-item align="center" className="font-size20" :label="$t('mes.lvtBuckle')">-->
          <!--            {{ data.LVTStandardDeductionQTY }}-->
          <!--          </el-descriptions-item>-->
          <!--          <el-descriptions-item align="center" className="font-size20" :label="$t('mes.pvcBuckleMaterial')">-->
          <!--            {{ data.produce_end_time ? data.produce_end_time.substr(0, 19) : '-' }}-->
          <!--          </el-descriptions-item>-->
          <el-descriptions-item align="center" className="font-size20" :label="$t('mes.outputTime')">
            {{ data.produceEndTime ? data.produceEndTime.substr(0, 19) : '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('mes.endTimeOf')">
            {{ data.restendTime ? data.restendTime.substr(0, 19) : '-' }}
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('mes.qtyInspectionResult')">
            <el-tag effect="dark" :type="data.qcResult === 'OK' ? 'success' : 'danger'">
              {{ data.qcResult || '-' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" width="160px" className="font-size20" :label="$t('mes.erpWhether')">
            <el-tag effect="dark" :type="data.isErpSuccess === 'Yes' ? 'success' : 'danger'">
              {{ data.isErpSuccess || '-' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item align="center" className="font-size20" :label="$t('wms.reportingStatus')">{{
              data.reportStatus || '-'
            }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
  </el-row>

</template>

<script>
export default {
  name: 'realDataCard',
  inject: ['queryParams'],
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    // standardConsume () {
    //   const _this = this
    //   const number = Number(_this.data.standardConsume || 0).toFixed(2)
    //   return number
    // }
  }
}
</script>

<style lang="scss">
.font-size20 {
  line-height: 3 !important;
}

</style>
